<script setup>
import { NBadge, useMessage } from 'naive-ui';
import { useRouter } from 'vue-router';
import StatusBar from "../common/StatusBar.vue"
import { useUserStore } from '@/stores'
import { getTeahProjList } from '@/api/teacher/teacher.js'
const message = useMessage()
const router = useRouter()
const curPage = ref(router.currentRoute.value.name)
const handleUpdateValue = (value) => {
  curPage.value=value
  router.push({ name: value })
}
/* 菜单栏中标记需要审核的成果数目 */
const userStore = useUserStore()
//获取需要审核的教学项目数目
const checkTeachingProjectNum = ref()
const getTPNum = async() => {
  const statusId = userStore.roleId
  const roleId = userStore.roleId
  let num = 1
  const { data:res } = await getTeahProjList({roleId,statusId,num})
  if (res.code  === 1) {
    checkTeachingProjectNum.value = res.data.total
  }
  else if(res.code === 0) {
    message.error(res.msg)
  }
}
getTPNum()
const getCheckNum = (type) => {
  // console.log("父组件自定义时间触发了");
  if(type === 'teachingProject') {
    checkTeachingProjectNum.value--
  }
}
const menuOptions=[
  {label:'教学项目',key:'checkTeachingProject',extra: () => {
      return h(NBadge,{ value: checkTeachingProjectNum.value, offset: [30,-2] },{default: () => {}})
    }},
]
</script>

<template>
  <StatusBar></StatusBar>
  <n-layout has-sider style="margin-top: 1px; min-height: 100vh; ">
    <n-layout-sider bordered content-style="padding: 0px; " width="210" class="menuClass">
      <n-menu :value="curPage" :options="menuOptions"  @update:value="handleUpdateValue" style="font-size:17px ;letter-spacing: .1em;" />
    </n-layout-sider>
    <n-layout-content content-style="padding:  30px 20px 0 20px;overflow-y:hidden;">
      <!--绑定自定义事件-->
      <router-view @get-check-num="getCheckNum"/>
    </n-layout-content>
  </n-layout>
</template>

<style>
.n-menu .n-menu-item-content.n-menu-item-content--selected::before {
  background-color:rgb(5,93,163);
  --n-item-color-active-hover:rgb(5,93,163);
}
.n-menu-item-content--selected > .n-menu-item-content-header {
  /* background-color: rgb(5,93,163); */
  --n-item-text-color-active: white;
  --n-item-text-color-active-hover:  white;
}
.n-menu-item-content::before {
  --n-item-color-hover: rgb(5,93,163);
  border-bottom: 1px dashed rgb(193, 217, 237);

}
.n-menu-item-content-header{
  --n-item-text-color-hover:  white;
  font-family: "Microsoft Yahei","Helvetica Neue", Helvetica, Arial, sans-serif;
}

.badgeStyle{
  position: relative;
  left: 35%;
  margin-top: -10%;
  background-color: #d03050;
  color: white;
  border-radius: 9px;
  font-size: 12px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  justify-content: center;
}
</style>
